<template>
    <div class="playList-Details">
        <div class="detailsContainer w">
            <div class="left-container">
                <div class="left-container-top">
                    <div class="playList-box">
                        <div class="img-box">
                            <img
                                :src="this.playListDetail.coverImgUrl"
                                alt=""
                            />
                        </div>
                        <div class="platList-title">
                            <h3>{{ this.playListDetail.name }}</h3>
                            <div class="playListAuthor">
                                <div class="author-img">
                                    <img
                                        src="../../assets/images/109951164568998564.jpg"
                                        alt=""
                                    />
                                </div>
                                <span>聊大牛股啥</span> <em>2019-10-21创建</em>
                            </div>
                            <div class="playListTags">
                                <span>标签：</span>
                                <em v-for="item in playListDetail.tags">{{
                                    item
                                }}</em>
                            </div>
                            <div class="playList-describe">
                                <p>{{ this.playListDetail.description }}</p>
                            </div>
                            <div class="playMusic">
                                <el-button
                                    type="warning"
                                    round
                                    class="el-icon-headset"
                                    >&nbsp;播放全部</el-button
                                >
                                <el-button
                                    type="danger"
                                    round
                                    class="el-icon-star-off"
                                    >&nbsp;收藏</el-button
                                >
                            </div>
                        </div>
                    </div>
                </div>
                <div class="playList-playMusic">
                    <el-table
                        :data="musicList"
                        stripe
                        style="width: 100%"
                        v-loading="loading"
                    >
                        <el-table-column label="序号" width="80" type="index">
                        </el-table-column>
                        <el-table-column label="歌曲" width="200">
                            <template slot-scope="scope">
                                <div class="table-info">
                                    <div
                                        class="img-box"
                                        @click="myGetSongUrl(scope.row)"
                                    >
                                        <img
                                            src="../../assets/images/lazyLoading10.gif"
                                            :data-img="scope.row.al.picUrl"
                                            class="playImgs"
                                            alt=""
                                        />
                                        <div class="hidden-play">
                                            <img
                                                src="../../assets/images/btn-play.png"
                                                alt=""
                                            />
                                        </div>
                                    </div>
                                    <div class="table-content">
                                        <p>{{ scope.row.name }}</p>
                                    </div>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="歌手">
                            <template slot-scope="scope">
                                <span v-for="item in scope.row.ar">
                                    {{ item.name }}
                                </span>
                            </template>
                        </el-table-column>
                        <el-table-column label="专辑">
                            <template slot-scope="scope">
                                {{ scope.row.al.name }}
                            </template>
                        </el-table-column>
                        <el-table-column label="时长">
                            <template slot-scope="scope">
                                {{ formatTime(scope.row.dt) }}
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>

            <div class="right-container">
                <!-- 喜欢该歌单的人盒子 -->
                <div class="like-box">
                    <div class="box-title">
                        <h4>喜欢该歌单的人</h4>
                    </div>
                    <div class="likeThisPlayList">
                        <div class="liker-itme" v-for="item in likeList">
                            <div class="img-box">
                                <img
                                    :src="item.avatarUrl"
                                    ref="imgs"
                                    :title="item.nickname"
                                />
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 相关推荐 -->
                <div class="recommended-box">
                    <div class="box-title">
                        <h4>相关推荐</h4>
                    </div>

                    <div class="recommended-info">
                        <div
                            class="recommended-item"
                            v-for="item in recommended"
                            :key="item.id"
                        >
                            <div class="img-box">
                                <img :src="item.coverImgUrl" />
                            </div>
                            <div
                                class="content-box"
                                @click="playListJumpDetails(item.id)"
                            >
                                <p>{{ item.name }}</p>
                                <span>By:{{ item.creator.nickname }}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 精彩评论盒子 -->
                <div class="comments-box">
                    <div class="box-title">
                        <h4 @click="musicTime()">精彩评论</h4>
                    </div>
                    <div class="comments-box-info">
                        <div
                            class="comments-item"
                            v-for="item in hotCommentsList"
                        >
                            <div class="img-box">
                                <img
                                    :src="item.user.avatarUrl"
                                    :title="item.user.nickname"
                                />
                            </div>
                            <div class="content-box">
                                <span>{{ item.user.nickname }}</span>
                                <div class="content-inner">
                                    <p>{{ item.content }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { lazyload, debounce, formatTime } from "../../utils/common";
import { createNamespacedHelpers } from "vuex";
const { mapState, mapMutations, mapActions } = createNamespacedHelpers(
    "playlist"
);
const {
    mapState: playMapState,
    mapMutations: playMapMutations,
    mapActions: playMapActions,
} = createNamespacedHelpers("playMusicModel");
export default {
    data() {
        return {
            xuhao: 0,
        };
    },
    computed: {
        ...mapState([
            "playListDetail",
            "musicList",
            "likeList",
            "hotCommentsList",
            "recommended",
            "loading",
        ]),
    },
    created() {
        //用于记录用户的滚动方向，用户一滚动，就把滚动后得到的值赋给这个值
        //等于是一个单向锁，防止用户向上滚动的时候也会触发事件
        this.prevDetailsY = 0;
        this.getPlayListDetail(this.$route.params._id);
        this.formatTime = formatTime;
    },
    mounted() {},
    updated() {
        this.foo = debounce(this.jiazai, 1000);
        window.addEventListener("scroll", this.foo, false);
        // setTimeout(() => {
        //     lazyload(this.$refs.playImgs);
        // }, 2000);
    },
    beforeDestroy() {
        window.removeEventListener("scroll", this.foo);
    },
    methods: {
        ...mapActions(["getPlayListDetail", "getSongDetail"]),
        ...playMapActions(["getSongUrl"]),
        ...playMapMutations([
            "copyChangeCurrentMusicName",
            "addLoaclStorage",
            "changeTempMusicList",
        ]),
        //换算序列号
        musicTime() {
            console.log(this.$refs.audioComponent);
        },
        //获取播放数据
        async myGetSongUrl(val) {
            const data = await this.getSongUrl(val.id);
            //改变当前播放的歌曲名字图片等
            this.copyChangeCurrentMusicName(val);
            // console.log(val);
            //添加一个新的歌曲对象加入本地存储，用来存储历史播放记录
            this.addLoaclStorage(val);
            //刷新历史播放列表
            this.changeTempMusicList();
        },

        playListJumpDetails(val) {
            this.getPlayListDetail(val);
        },
        jiazai() {
            let imgs = document.querySelectorAll(".playImgs");
            if (window.scrollY > this.prevDetailsY) {
                console.log("防抖~~~~~~~~~");
                this.prevDetailsY = window.scrollY;
                lazyload(imgs);
            }
        },
    },
};
</script>

<style lang='scss' scoped>
@import "../../assets/sass/playlistDetails.scss";
</style>